<template>
  <div class="contentMain">
    <Card>
      <h2>评论</h2>
      <div class="comment">
        <li v-for="comment in commentsList" :key="comment._id">
          {{ comment.username }} 评论：{{ comment.context }}
        </li>
      </div>
      <div>
        <Form ref="formInline" :model="formInline">
          <Row>
            <i-col span="16" offset="4">
              <FormItem prop="context">
                <i-input
                  type="textarea"
                  v-model="formInline.context"
                  placeholder="Comment"
                >
                </i-input>
              </FormItem>
            </i-col>
          </Row>
        </Form>
      </div>
      <div style="padding-top:10px">
        <i-button type="primary" @click="sendComment('formInline')"
          >评论</i-button
        >
      </div>
    </Card>
  </div>
</template>

<script>
export default {
  props: ['movie_id'],
  data() {
    return {
      commentsList: [],
      formInline: {
        context: ''
      }
    }
  },
  created() {
    this.getCommentList()
  },
  methods: {
    // 评论列表
    getCommentList() {
      this.$http
        .get('http://localhost:3000/admin/comments/list')
        .then(({ body }) => {
          const { data, status } = body
          if (status === 200) {
            this.commentsList = data
          }
        })
    },
    sendComment(name) {
      const username = localStorage.getItem('username')
      let formData = null
      if (username) {
        formData = {
          movieId: this.movie_id,
          context: this.formInline.context,
          username
        }
      } else {
        formData = {
          movieId: this.movie_id,
          context: this.formInline.context
        }
      }
      this.$http
        .post('http://localhost:3000/user/postComment', formData, {
          emulateJSON: true
        })
        .then(({ body }) => {
          const { status, message } = body
          if (status === 200) {
            this.getCommentList()
            this.$refs[name].resetFields()
            this.$Message.success({
              content: message,
              duration: 2,
              closable: true
            })
          }
        })
    }
  }
}
</script>

<style lang="css" scoped>
.contentMain {
  text-align: center;
  margin-top: 8px;
}
.comment {
  margin-bottom: 24px;
}
</style>
